<template>
	<view class="container" style="padding-top: 184rpx">
		<BackGround />

		<view class="edit-icon" @click="showEdit = true">
			<image src="/static/edit-icon.png" mode="widthFix"></image>
		</view>

		<view class="column content">
			<view class="avatar center">
				<image src="" mode="widthFix"></image>
			</view>
			<view class="nickName">香蕉再出门</view>

			<view
				class="cannel row-between"
				style="margin-top: 60rpx"
				hover-class="hoverClass"
				hover-stay-time=".3s"
				@click="to('/pages/checkIn/index')"
			>
				<view class="row">
					<image src="@/static/wddk.png" mode="widthFix"></image>
					<text>我的打卡</text>
				</view>
				<image src="@/static/mine-arrow-right.png" mode="widthFix" class="arrow"></image>
			</view>

			<button class="cannel row-between" hover-class="hoverClass" hover-stay-time=".3s" open-type="contact">
				<view class="row">
					<image src="@/static/zxkf.png" mode="widthFix" style="width: 52rpx"></image>
					<text>在线客服</text>
				</view>
				<image src="@/static/mine-arrow-right.png" mode="widthFix" class="arrow"></image>
			</button>

			<view
				class="cannel row-between"
				hover-class="hoverClass"
				hover-stay-time=".3s"
				@click="to('/pages/agreement/aboutUs')"
			>
				<view class="row" style="padding-left: 14rpx">
					<image src="@/static/gy.png" mode="widthFix" style="width: 30rpx"></image>
					<text style="margin-left: 30rpx">关于</text>
				</view>
				<image src="@/static/mine-arrow-right.png" mode="widthFix" class="arrow"></image>
			</view>
		</view>
	</view>

	<up-popup v-model:show="showEdit" :round="30">
		<view class="edit-con column-center">
			<view class="edit-con-btn" hover-class="hoverClass" hover-stay-time=".3s" @click="uploadImage(['album'])">
				从手机相册选择
			</view>
			<view class="edit-con-btn" hover-class="hoverClass" hover-stay-time=".3s" @click="uploadImage(['camera'])">
				拍照上传
			</view>
			<view class="edit-con-btn" hover-class="hoverClass" hover-stay-time=".3s" @click="showEdit = false">
				取消
			</view>
		</view>
	</up-popup>

	<Tabbar type="mine" />
</template>

<script setup>
import { http } from 'uview-plus';
import Tabbar from '@/components/Tabbar.vue';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import base from '@/utils/index.js';

const showEdit = ref(false);

function to(url) {
	uni.navigateTo({
		url
	});
}

function openService() {
	uni.openCustomerServiceChat({});
}

async function uploadImage(sourceType) {
	base.chooseImageUpload(sourceType, async (url) => {
		try {
			uni.showToast({
				title: '更新中...',
				icon: 'loading'
			});
			await http.put('/wx/customer/updateCustomer', {
				head: url
			});
			uni.showToast({
				title: '更新成功',
				icon: 'success'
			});
			showEdit.value = false;
		} finally {
			uni.hideLoading();
		}
	});
}

onLoad(() => {
	uni.hideTabBar();
});
</script>

<style lang="scss" scoped>
.edit-icon {
	position: fixed;
	left: 72rpx;
	top: 126rpx;
	width: 88rpx;
	height: 88rpx;
	z-index: 999;
	image {
		width: 100%;
		height: 100%;
	}
}

.content {
	position: relative;
	z-index: 10;
	.avatar {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background-color: #fcc011;

		image {
			width: 190rpx;
			height: 190rpx;
			border-radius: 50%;
		}
	}

	.nickName {
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		margin-top: 30rpx;
	}
}

.cannel {
	width: 656rpx;
	height: 120rpx;
	background: #ffffff;
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	margin-top: 40rpx;
	padding: 0 24rpx 0 40rpx;

	.row {
		image {
			width: 52rpx;
		}
		text {
			font-size: 34rpx;
			color: #000000;
			margin-left: 16rpx;
		}
	}

	.arrow {
		width: 88rpx;
		height: 88rpx;
	}
}

.edit-con {
	width: 750rpx;
	height: 578rpx;
	background-color: #fcbf10;
	border-radius: 60rpx 60rpx 0 0;
}

.edit-con-btn {
	width: 644rpx;
	height: 100rpx;
	background: #ffffff;
	border-radius: 60rpx 60rpx 60rpx 60rpx;

	font-weight: bold;
	font-size: 34rpx;
	color: #000000;
	text-align: center;
	line-height: 100rpx;
	margin-top: 44rpx;
}
</style>
